<template>
	<view style="padding: 30rpx;">
		<view class="btn-box">
			<button class="sub-btn" style="background-color: #ff8d0b;color: #fff;flex: 1;">
				<text style="font-size: 24rpx;">对</text>
				<text style="font-size: 36rpx;margin-left: 6rpx;">比</text>
			</button>
			<button class="sub-btn" style="background-color: #005dff;color: #fff;flex: 3;margin-left: 20rpx;" @click="onPreOrderCollect">预购收藏</button>
		</view>
		<view class="" style="display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;padding: 20rpx;">
				<view class="">
					<image src="../../static/images/tu1.jpg" style="width: 150rpx;height: 150rpx;border-radius: 10rpx;"></image>
				</view>
				<view style="margin-left: 50rpx;">
					<view style="font-size: 32rpx;">
						小程序昵称
					</view>
					<view style="font-size: 24rpx;margin-top: 10rpx;color:#b0b0b0">
						作者:安偷懒的猫
					</view>
					<view style="font-size: 24rpx;margin-top: 10rpx;color:#b0b0b0">
						发布时间：2024-07-09
					</view>
					<view style="font-size: 26rpx;color: #999;margin-top: 16rpx;">
						类型： 
						<text style="border: 1rpx solid #d6d6d6;border-radius: 10rpx;padding: 2rpx 15rpx;font-size: 22rpx;margin-right: 20rpx;">小程序</text>
						<text style="border: 1rpx solid #d6d6d6;border-radius: 10rpx;padding: 2rpx 15rpx;font-size: 22rpx;margin-right: 20rpx;">H5</text>
					</view>
					<view style="font-size: 26rpx;color: #999;margin-top: 16rpx;">
						当前服务：
						<text style="border: 1rpx solid #d6d6d6;border-radius: 10rpx;padding: 2rpx 15rpx;font-size: 22rpx;margin-right: 20rpx;">定制</text>
						<text style="border: 1rpx solid #d6d6d6;border-radius: 10rpx;padding: 2rpx 15rpx;font-size: 22rpx;margin-right: 20rpx;">托管</text>
						<text style="border: 1rpx solid #d6d6d6;border-radius: 10rpx;padding: 2rpx 15rpx;font-size: 22rpx;margin-right: 20rpx;">源码</text>
					</view>
					<view style="font-size: 26rpx;color: #999;margin-top: 16rpx;">
						发布时间：2023-07-09
					</view>
					
				</view>
				
		</view>
		<view style="font-size: 26rpx;color: #999;margin-top: 16rpx;">
							功能介绍：漓江书院小程序提供了便捷的报名参加活动和预约服务的功能。‌漓江书院小程序不仅是一个提供阅读和学习的平台，‌还通过其小程序为用户提供了额外的便利。此外，‌漓江书院还通过其小程序提供预约服务
		综上所述，‌漓江书院小程序通过提供报名参加活动和预约服务的功能，‌为用户提供了更加便捷的文化参与和体验方式，‌无论是艺术创作、‌学习还是其他文化活动，‌用户都可以通过漓江书院小程序轻松参与和享受。‌
						</view>
		<view class="">
			<fui-collapse accordion >
				<fui-collapse-item :index="index" v-for="(item, index) in dataList" :key="index">
					<view class="fui-item__box">
						<fui-checkbox :checked="item.isChecked" @change="onChange($event, item , index)"></fui-checkbox>
						<text style="margin-left: 10rpx;">{{item.title}}</text>
					</view>
					<template v-slot:content>
						<view class="fui-descr" v-for="(j, k) in item.contrast" :key="k">
							<text  style="flex: 1;text-align: center;">{{j.name}}</text>
							<text  style="flex: 1;text-align: center;">{{j.price}}</text>
						</view>
					</template>
				</fui-collapse-item>
			</fui-collapse>
		</view>
		
		
		<fui-tabs :tabs="tabs" center scroll size="24" selectedSize="28"></fui-tabs>
		<!-- 	<view class="">
				<view class="">
					已测试
				</view>
				<view class="">
					
				</view>
			</view> -->
		<!-- 内容-->
		<view class="" style="padding: 0 20rpx;margin-top: 20px;">
			<view style="font-size: 28rpx;font-weight: 600;">项目介绍</view>
			<view style="font-size: 24rpx;margin-top: 20rpx;color: rgba(0,0,0,.45);">
				<p>传统门店升级线上线下互通小程序，打通新华书店收银系统，增强用户粘性。 漓江出版社成立于1980年，隶属于广西出版传媒集团有限公司，是中国大陆出版文学艺术、人文社科、文化生活和青少年读物的重要机构。</p>
				<p style="margin-top: 10rpx;"> 漓江社文学出版传统深厚，尤其是外国文学图书的译介出版，享誉已久，对于推动新时期的思想解放和社会进步发挥了重要作用，“获诺贝尔文学奖作家丛书”等，是中国改革开放以来第一批大规模翻译出版外国文学名著的系统工程，影响了整整一个时代的阅读。近年崛起的人文社科图书起点高，重原创，颇受读书界和评论界好评；教育读物和亲子读物在全国同类图书市场中位居前列；文化生活类图书以优雅、时尚、实用的品质广受欢迎。2013年被评为“全国文艺出版社十强”、“中国出版社2013年世界影响力百强”63名。</p>
			</view>
		</view>
		
		<view style="height: 100rpx;">
			
		</view>
	</view>

</template>

<script setup>
	import { ref, reactive } from "vue";
	const tabs = ref([
		{
			name: '项目介绍',
			id: 0
		},
		{
			name: '商业模式',
			id: 1
		},
		{
			name: '盈利模式',
			id: 2
		},
		{
			name: '商业计划书',
			id: 3
		},
		{
			name: '说明文档',
			id: 4
		},
		{
			name: '下载说明',
			id: 5
		},
	]);
	const dataList = ref([
		{
			title: '对比应用一',
			isChecked: false,
			contrast: [
				{
					name: '功能特权',
					price: '99',
				},
				{
					name: '购买源码费用',
					price: '199',
				},
				{
					name: '服务费用',
					price: '299',
				},
				{
					name: '企业定制费用',
					price: '599',
				},
				{
					name: '部署服务器费用',
					price: '99',
				}
			]
		},
		{
			title: '对比应用二',
			isChecked: false,
			contrast: [
				{
					name: '功能特权',
					price: '99'
				},
				{
					name: '购买源码费用',
					price: '199'
				},
				{
					name: '服务费用',
					price: '299'
				},
				{
					name: '企业定制费用',
					price: '599'
				},
				{
					name: '部署服务器费用',
					price: '99'
				}
			]
		},
		{
			title: '对比应用三',
			isChecked: false,
			contrast: [
				{
					name: '功能特权',
					price: '99'
				},
				{
					name: '购买源码费用',
					price: '199'
				},
				{
					name: '服务费用',
					price: '299'
				},
				{
					name: '企业定制费用',
					price: '599'
				},
				{
					name: '部署服务器费用',
					price: '99'
				}
			]
		},
		{
			title: '对比应用四',
			isChecked: false,
			contrast: [
				{
					name: '功能特权',
					price: '99'
				},
				{
					name: '购买源码费用',
					price: '199'
				},
				{
					name: '服务费用',
					price: '299'
				},
				{
					name: '企业定制费用',
					price: '599'
				},
				{
					name: '部署服务器费用',
					price: '99'
				}
			]
		},
		{
			title: '对比应用五',
			isChecked: false,
			contrast: [
				{
					name: '功能特权',
					price: '99'
				},
				{
					name: '购买源码费用',
					price: '199'
				},
				{
					name: '服务费用',
					price: '299'
				},
				{
					name: '企业定制费用',
					price: '599'
				},
				{
					name: '部署服务器费用',
					price: '99'
				}
			]
		}
	])
	const onPreOrderCollect = () => {
		uni.switchTab({
			url:'/view/preOrderCollect/index'
		})
	}
	
	const onChange = (event, item, index) => {
		dataList.value.forEach((data, key) => {
			if (key == index) data.isChecked = event.checked;
		})
		console.log('event', event)
		console.log('event', index)
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	.fui-item__box {
		font-size: 26rpx;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	
	.fui-logo {
		width: 48rpx;
		height: 48rpx;
		margin-right: 24rpx;
		display: block;
	}
	
	.fui-descr {
		display: flex;flex-direction: row;justify-content: flex-start;
		padding: 20rpx;
		margin-top: 10rpx;
		font-size: 26rpx;
		color: #7F7F7F;
		word-break: break-all;
		box-sizing: border-box;
	}
	
	.btn-box {
		position: fixed;
		left: 20rpx;
		right: 20rpx;
		bottom: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	
	.sub-btn {
		margin: 0;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		&::after {
			border: none;
		}
	}
</style>